<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿新浪微博发布评论js代码</title>

<script src="js/xml.js"></script>

<link href="css/reset.css" rel="stylesheet">
<style>
.main {
	width: 800px;
	margin: 20px auto;
}

span {
	display: inline-block;
	width: 200px;
	height: 25px;
	line-height: 25px;
	vertical-align: center;
	text-align: left;
	margin-bottom: 10px;
}

.tag {
	font-size: 13px;
	margin-left: 370px;
	vertical-align: bottom;
	text-align: center;
	margin-bottom: 0;
}

.text2 {
	width: 750px;
	height: 180px;
	margin: 0 auto;
	resize: none;
}

input {
	display: inline-block;
	width: 80px;
	height: 50px;
	background: #E2526F;
	border: 0;
	margin-left: 670px;
	margin-top: 10px;
}

.creatediv {
	width: 675px;
	height: 80px;
	border: 1px solid gray;
	position: relative;
	margin-top: 10px;
	padding-left: 75px;
}

.createinput {
	width: 80px;
	height: 30px;
	position: absolute;
	right: 5px;
	bottom: 5px;
}

.createimg {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 15px;
	left: 15px;
}

.createdivs {
	width: 600px;
	height: 50px;
	position: absolute;
	top: 15px;
	left: 85px;
}
</style>

</head>
<body id="body">
	<script src="/demos/googlegg.js"></script>
	<div class="main">
		<span>你想对设计师们说点什么</span> <span class="tag">你最多可以输入30个字符</span>
		<textarea id="text" cols="30" rows="10" maxlength="30" class="text2"></textarea>
		<br> <input type="button" value="发 表" id="ipt">
		<div id="txt"></div>
	</div>

	<script>
		var ipt = document.getElementById("ipt");
		var txt = document.getElementById('txt');
		var textarea = document.getElementById("text");
		ipt.onclick = function() {
			var textValue = textarea.value.LTrim();
			textarea.value = "";
			if (textValue.length > 0) {
				var divs = document.createElement("div");
				var imgs = document.createElement("img");
				var ps = document.createElement("p");
				var inputs = document.createElement("input");
				divs.setAttribute("class", "creatediv");
				imgs.setAttribute('class', "createimg");
				ps.setAttribute("class", "createdivs");
				inputs.setAttribute("class", "createinput");
				imgs.src = "img/1.jpg";
				inputs.type = "button";
				inputs.value = "删除";
				ps.innerHTML = textValue;
				divs.appendChild(imgs);
				divs.appendChild(ps);
				divs.appendChild(inputs);
				if (txt.children.length == 0) {
					txt.appendChild(divs);

				} else {
					txt.insertBefore(divs, get_firstChild(txt))
				}
				inputs.onclick = function() {
					this.parentNode.parentNode.removeChild(this.parentNode)
				}
			}

		}
	</script>

	<div
		style="text-align: center; margin: 50px 0; font: normal 14px/24px 'MicroSoft YaHei';">
	</div>
</body>
</html>
